<!-- 预警管理----添加规则 -->
<template>
  <bs-dialog
    :title="$t('预警规则')"
    :visible.sync="showFlag"
    size="default"
    @closed="doCloseEdit"
  >
    <template slot="main">
      <bs-main>
        <device-warn-rule-condition
          slot="header"
          @add="addWarnRule"
          @edit="editWarnRule"
          @delete="deleteWarnRule"
          @refresh="doRereshList"
        ></device-warn-rule-condition>
        <list
          ref="list"
          class="center"
          height="380px"
          :table-tag="tableName"
          :init-headmune-flag="initHeadmuneFlag"
          :list-data="tableData"
          :has-select="true"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :action-opts="actionOpts"
          @init-table="initTable"
          @selection-change="handleSelectionChange"
          ></list>
        <!-- <device-warn-rule-list
          :table-data="tableData"
          :col-data="colData"
          @selectAction="selectAction"
        ></device-warn-rule-list> -->
        <device-warn-dialog
          :show-icon="false"
          @callback="refreshRuleChangeCallBack"
        ></device-warn-dialog>
      </bs-main>
    </template>
    <template slot="footer">
      <bs-confirm-button-icon @click.native="doCloseEdit"></bs-confirm-button-icon>
      <bs-cancel-button-icon :show-icon="false" @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { fontItemArray } from '@/const/index.js'
import DeviceWarnRuleCondition from './DeviceWarnRuleCondition'
import DeviceWarnDialog from './DeviceWarnDialog'
import Pagination from '@/components/Pagination'
import List from '@/components/List'
import $ from 'jquery'
export default {
  name: 'DeviceWarnListDialog',
  components: {
    List,
    DeviceWarnRuleCondition,
    DeviceWarnDialog,
    // Pagination,
  },
  data() {
    return {
      pageData: {
        page: 1,
        total: 0,
        limit: 15,
      },
      queryData: {},
      showFlag: false,
      tableData: [],
      colData: [
        { label: '预警规则', prop: 'name', minwidth: 150 },
        { label: 'CPU负载', prop: 'cpuLoad', minwidth: 90 },
        { label: '内存占用率', prop: 'memLoad', minwidth: 90 },
        { label: '车辆温度', prop: 'temperature',minwidth: 90},
        { label: '时间', prop: 'createdAt', minwidth: 150 },
      ],
      initColsProps: ['name', 'cpuLoad', 'memLoad', 'temperature', 'createdAt'],
      actionOpts: {
        show: false
      },
      //选中的规则用于删除或者编辑 从子类传过来保存的
      selectRuleArr: [],
      tableName:'deviceWarnListTable',
      initHeadmuneFlag: false
    }
  },
  created() {
    this.$eventBus.$on('showDeviceWarnRuleDialog', this.show)
  },
  beforeDestroy() {
    this.$eventBus.$off('showDeviceWarnRuleDialog')
  },
  mounted: function () {
    this.$nextTick(function () {
      this.doWarnRuleList()
    })
  },
  methods: {
    initTable(config){
      this.initHeadmuneFlag = true //更改值  触发表头数据重绘
    },
    // 显示
    show(editorForm) {
      this.editorForm = editorForm
      this.showFlag = true
    },
    // 关闭
    doCloseEdit: function () {
      this.showFlag = false
    },

    //  预警规则的增删改除
    addWarnRule() {
      const editorForm = {}
      this.$eventBus.$emit('showDeviceWarnDialog', editorForm, true)
    },
    editWarnRule() {
      if (this.selectRuleArr && this.selectRuleArr.length > 0) {
        if (this.selectRuleArr.length > 1) {
          // this.$message.error('不能选择多个规则进行修改')
          this.$alert('提示', '此操作不支持多选');
          return
        }

        var form = { ...this.selectRuleArr[0] }
        this.$eventBus.$emit('showDeviceWarnDialog', form, false)
      } else {
        // this.$message.error('请选择预警规则')
        this.$alert('提示', '请选择预警规则');
      }
    },
    deleteWarnRule() {
      if (this.selectRuleArr && this.selectRuleArr.length > 0) {
        this.$confirm('提示', '是否确认删除？').then((res) => {
          if (res) {
            let ids = []
            this.selectRuleArr.forEach((element) => {
              ids.push(element.id)
            })
            let params = { ids: ids }
            this.$store
              .dispatch('device/doDeleteWarnRule', params)
              .then((res) => {
                if (res) {
                  this.$message.success('删除成功')
                  this.doWarnRuleList()
                }
              })
          }
        })
      } else {
        // this.$message.error('请选择需要删除的预警规则')
        this.$alert('提示', '请选择预警规则');
      }
    },
    refreshRuleChangeCallBack(isAdd) {
      this.doWarnRuleList()
    },
    // 多选
    handleSelectionChange(val) {
      this.selectRuleArr = val
    },
    //预警规则的的多选保存回调
    selectAction(selectRuleArray) {
      this.selectRuleArr = selectRuleArray
    },
    doRereshList() {
      this.doWarnRuleList({current: 1})
      this.$message.success('刷新成功')
    },
    // 查询列表
    doWarnRuleList(current) {
      if (current) {
        this.pageData = {
          ...this.pageData,
          ...current,
        }
      }
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      queryData.queryType = 0
      this.$store.dispatch('device/doWarnRuleList',queryData).then((res) => {
        if (res) {
          console.log(res)
          this.tableData = res
          this.pageData.total = Number(res.total? res.total: 0)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 800px;
  height: 550px;
}
::v-deep .el-dialog__body {
    margin-top: 3px;
  }
</style>
